<template>
  <view style="padding-bottom: 110rpx">
    <view class="head">
      <view class="cot">
        <image class="bg" src="../../static/my/hy.png" mode="aspectFill" />
        <view class="info">
          <image :src="userInfo?.headUrl" class="hImg" mode="aspectFill" />
          <view class="r">
            <view class="t">{{ userInfo?.nickName }}</view>
            <view class="b">购买会员商品 享会员权益</view>
          </view>
        </view>
      </view>
    </view>
    <view class="main">
      <view @click="tabActive = item?.goodId" :class="{ hyBox: true, active: tabActive === item?.goodId }" v-for="(item, index) in list" :key="index">
        <view class="icon">
          <image :src="item?.picurl" mode="aspectFill" />
        </view>
        <view class="right">
          <view class="line1">{{ item?.title }}</view>
          <view class="line2">{{ item?.description }}</view>
          <view class="line3">购买可升级为至尊会员</view>
          <view class="line4">
            价值¥ <text>{{ item?.price }}</text>
            <!-- +300积分 -->
          </view>
        </view>
      </view>
      <view class="ruleBox">
        <view class="title"> 会员规则 </view>
        会员管理细则一、本管理细则的制定，是为加强会员制的管理，明确相关部门的责任和工作流程，使会员制能够有条不紊的开展，达到为公司创造良好经济效益的目的。二、各门店服务台人员</view
      >
      <view class="bottomBox">
        <u-button type="primary" @click="submit" shape="circle" color="#291602">立即购买</u-button>
        <!-- <u-checkbox-group v-model="checkboxValue" active-color="#38b5f8" shape="circle" placement="column">
          <view class="radioBox">
            <u-checkbox label="请阅读 同意" name="1"> </u-checkbox>
            <text class="xfxy" @click="goPage('/pages/myPage/userAgreement')">《用户协议》</text>
            <text class="xfxy" @click="goPage('/pages/myPage/privacyAgreement')">《隐私协议》</text>
          </view>
        </u-checkbox-group> -->
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { goPage } from "@/utils/commonFn";
import { getGoodsList } from "@/api/order";
const checkboxValue = ref();
const tabActive = ref("");
const list = ref<any[]>([]);
const userInfo = uni.getStorageSync("userInfo");
onMounted(async () => {
  const res = await getGoodsList({ type: 0, pageNo: 1 });
  list.value = res.dxGoodLst || [];
  tabActive.value = res.dxGoodLst[0]?.goodId;
});
const submit = async () => {
  goPage(`/pages/myPage/memberGoods?goodId=${tabActive.value}`);
};
</script>
<style lang="less" scoped>
.head {
  background: #fff;
  .cot {
    padding: 45rpx;
    padding-bottom: 0;
    position: relative;
    box-shadow: 0rpx 0rpx 40rpx 0rpx #e2e2e2;
    .bg {
      width: 686rpx;
      height: 196rpx;
      position: absolute;
      left: 30rpx;
      top: 57rpx;
      z-index: 1;
    }
    .info {
      display: flex;
      position: relative;
      align-items: center;
      z-index: 99;
      padding: 32rpx;
      padding-top: 45rpx;
      .hImg {
        width: 112rpx;
        height: 112rpx;
        background: #614549;
        border-radius: 50%;
        margin-right: 32rpx;
      }
      .r {
        .t {
          font-size: 36rpx;
          color: #ffffff;
        }
        .b {
          font-size: 20rpx;
          color: #95959c;
          line-height: 38rpx;
          margin-top: 16rpx;
        }
      }
    }
  }
}
.hyBox {
  display: flex;
  padding: 32rpx 20rpx;
  background: #ffffff;
  border-radius: 32rpx 32rpx 32rpx 32rpx;
  margin-top: 50rpx;
  .icon {
    background: #f2fbfa;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20rpx 30rpx;
    margin-right: 30rpx;
    image {
      width: 122rpx;
      height: 140rpx;
    }
  }
  .right {
    .line1 {
      font-size: 28rpx;
      color: #333333;
      font-weight: bold;
    }
    .line2 {
      font-size: 24rpx;
      color: #8a8a8d;
      margin-top: 8rpx;
    }
    .line3 {
      font-size: 22rpx;
      color: #81d8d0;
      margin-top: 8rpx;
    }
    .line4 {
      font-size: 24rpx;
      color: #ea3b3b;
      margin-top: 30rpx;
      text {
        font-size: 36rpx;
      }
    }
  }
}
.active {
  border: 4rpx solid #81d8d0;
}
.ruleBox {
  font-size: 24rpx;
  color: #8a8a8d;
  margin: 20rpx 32rpx 150rpx;
  padding: 44rpx 32rpx;
  .title {
    font-weight: 500;
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
    text-align: center;
  }
}
.radioBox {
  margin: 0;
  margin-top: 15rpx;
  .xfxy {
    color: #81d8d0;
  }
}
</style>
